<template>
	<view :class="'fui-picturew row-' + diyitem.params.row">
		<view class="fui-cube" :style="'background:' + diyitem.style.background + ';'" v-if="diyitem.params.row == 1">
			<view class="fui-cube-left">
				<view
					@tap="navigate"
					class="navigator"
					:data-url="diyitem.data[0].linkurl"
					openType="navigate"
					:style="'padding:' + diyitem.style.paddingtop + 'rpx' + ' ' + diyitem.style.paddingleft + 'rpx'">
					<image mode="widthFix" :src="diyitem.data[0].imgurl" class="fui-cube-left-image"></image>
				</view>
			</view>
			<view class="fui-cube-right">
				<view
					@tap="navigate"
					class="navigator"
					:data-appid="diyitem.data[1].appid"
					:data-appurl="diyitem.data[1].appurl"
					:data-phone="diyitem.data[1].phone"
					:data-url="diyitem.data[1].linkurl"
					openType="navigate"
					:style="'padding:' + diyitem.style.paddingtop + 'rpx' + ' ' + diyitem.style.paddingleft + 'rpx' + ' ' + diyitem.style.paddingtop  + 'rpx' + ' 0;'"
						v-if="diyitem.data.length == 2">
					<image mode="widthFix" :src="diyitem.data[1].imgurl" class="fui-cube-right-image"></image>
				</view>
				<block v-if="diyitem.data.length > 2">
					<view class="fui-cube-right1"
					>
						<view
							@tap="navigate"
							class="navigator"
							:data-appid="diyitem.data[1].appid"
							:data-appurl="diyitem.data[1].appurl"
							:data-phone="diyitem.data[1].phone"
							:data-url="diyitem.data[1].linkurl"
							openType="navigate"
							:style="'padding:' + diyitem.style.paddingtop + 'rpx' + ' ' + diyitem.style.paddingleft + 'rpx' + ' 0 0;'">
							<image mode="widthFix" :src="diyitem.data[1].imgurl" class="fui-cube-right-image"></image>
						</view>
					</view>
					<view class="fui-cube-right2">
						<view
							@tap="navigate"
							class="navigator"
							:data-appid="diyitem.data[2].appid"
							:data-appurl="diyitem.data[2].appurl"
							:data-phone="diyitem.data[2].phone"
							:data-url="diyitem.data[2].linkurl"
							openType="navigate"
							:style="'padding:' + diyitem.style.paddingtop + 'rpx' + ' ' + diyitem.style.paddingleft + 'rpx' + ' ' + diyitem.style.paddingtop + 'rpx' + ' 0;'"
							v-if="diyitem.data.length == 3">
							<image mode="widthFix" :src="diyitem.data[2].imgurl" class="fui-cube-right-image"></image>
						</view>
						<view class="left" v-if="diyitem.data.length > 3" >
							<view
								@tap="navigate"
								class="navigator"
								:data-appid="diyitem.data[2].appid"
								:data-appurl="diyitem.data[2].appurl"
								:data-phone="diyitem.data[2].phone"
								:data-url="diyitem.data[2].linkurl"
								openType="navigate"
								:style="'padding:' + diyitem.style.paddingtop + 'rpx' + ' ' + diyitem.style.paddingleft + 'rpx' + ' ' + diyitem.style.paddingtop + 'rpx' + ' 0;'">
								<image mode="widthFix" :src="diyitem.data[2].imgurl" class="image"></image>
							</view>
						</view>
						<view class="right" v-if="diyitem.data.length == 4">
							<view
								@tap="navigate"
								class="navigator"
								:data-appid="diyitem.data[3].appid"
								:data-appurl="diyitem.data[3].appurl"
								:data-phone="diyitem.data[3].phone"
								:data-url="diyitem.data[3].linkurl"
								openType="navigate"
								:style="'padding:' + diyitem.style.paddingtop + 'rpx' + ' ' + diyitem.style.paddingleft + 'rpx' + ' ' + diyitem.style.paddingtop + 'rpx' + ' 0;'">
								<image mode="widthFix" :src="diyitem.data[3].imgurl" class="fui-cube-right-image"></image>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<view :style="'background:' + diyitem.style.background" v-else>
			<swiper :duration="duration" :interval="interval" :style="'background:' + diyitem.style.background + ';padding:20rpx 0;'" v-if="diyitem.params.showtype == 1">
				<swiper-item class="fui-picturew" v-for="(childitem, index) in diyitem.data_temp" :key="index" wx:for-index="childid">
					<view class="item" v-for="(pic_item, index2) in childitem" :key="index2" wx:for-index="pic_index">
						<view
							@tap="navigate"
							class="navigator"
							:data-url="pic_item.linkurl"
							:style="'padding:' + diyitem.style.paddingtop + 'rpx' + ' ' + diyitem.style.paddingleft + 'rpx'">
							<image mode="widthFix" :src="pic_item.imgurl"></image>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<block v-else>
				<view
					class="item"
					:style="'padding:' + diyitem.style.paddingtop + 'rpx' + ' ' + diyitem.style.paddingleft + 'rpx' + ';box-sizing:border-box;'"
					v-for="(childitem, index) in diyitem.data"
					:key="index">
					<view
						@tap="navigate"
						class="navigator"
						:data-appid="childitem.appid"
						:data-phone="childitem.phone"
						:data-url="childitem.linkurl"
						:style="'padding:' + diyitem.style.paddingtop + 'rpx' + ' ' + diyitem.style.paddingleft + 'rpx'">
						<image mode="widthFix" :src="childitem.imgurl" style="padding:0;margin:0"></image>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			diyitem: {
				type: Object
			}
		},
		methods: {
			navigate(e) {
				uni.navigateTo({
					url: e.currentTarget.dataset.url,
					fail() {
						uni.switchTab({
							url: e.currentTarget.dataset.url
						});
					}
				});
			}
		}
	};
</script>
<style scoped>
.right{
	width: 48.8%;
	height: auto;
}
.left{
	width: 48.8%;
	height: auto;
}
.image{
	width: 100%;
	height: auto;
}
.fui-cube-right2{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.fui-cube-right-image{
	width: 100%;
	height: auto;
}
.fui-cube-right{
	width: 45.9%;
}
.fui-cube-left-image{
	width: 100%;
	height: auto;
}
.fui-cube-left{
	width: 46.7%;
	margin-right: 1.6%;
}
.fui-cube image{
	border-radius: 8rpx;
}
.fui-cube{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
}




.fui-pictures {
	height: auto;
	display: block;
	overflow: hidden;
}
.fui-pictures.row-2 .item {
	width: 50%;
}
.fui-pictures.row-3 .item {
	width: 33.3%;
}
.fui-pictures.row-4 .item {
	width: 25%;
}
.fui-pictures.row-5 .item {
	width: 20%;
}
.fui-pictures.single .item {
	float: left;
}
.fui-pictures .item {
	height: auto;
	width: 100%;
	display: inline-block;
	box-sizing: border-box;
}
.fui-pictures .item .image {
	position: relative;
}
.fui-pictures .item image {
	display: block;
	width: 100%;
	height: 100%;
}
.fui-pictures .item .image .title {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	line-height: 40rpx;
	color: #fff;
	padding: 16rpx 6rpx 2rpx;
	font-size: 28rpx;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fui-pictures .item .text {
	font-size: 28rpx;
	height: 40rpx;
	line-height: 48rpx;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-left: 6rpx;
}
.fui-picturew {
	overflow: hidden;
}
.fui-picturew.row-2 .item {
	width: 50%;
}
.fui-picturew.row-3 .item {
	width: 33.33%;
}
.fui-picturew.row-4 .item {
	width: 24.9%;
}
.fui-picturew .item {
	display: block;
	float: left;
	height: auto;
}
.fui-picturew .item image {
	display: block;
	width: 100%;
	max-width: 100%;
}
.fui-cube.diypage-cube image {
	display: block;
	width: 100%;
	max-width: 100%;
}
.fui-cube.diypage-cube {
	height: auto;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	padding-bottom: 0;
}
.fui-cube.diypage-cube image {
	width: 100%;
	height: 100%;
}
.fui-cube navigator {
	width: 100%;
	height: auto;
	box-sizing: border-box;
}
/* .fui-cube {
	height: 0px;
	width: 100%;
	margin: 0px;
	padding-bottom: 50%;
	position: relative;
	overflow: hidden;
}
.fui-cube .fui-cube-left {
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	position: absolute;
}
.fui-cube .fui-cube-left {
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.fui-cube .fui-cube-right {
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
}
.fui-cube .fui-cube-right1 {
	width: 100%;
	height: 50%;
	position: absolute;
	top: 0;
	left: 0;
}
.fui-cube .fui-cube-right2 {
	width: 100%;
	height: 50%;
	position: absolute;
	top: 50%;
	left: 0;
}
.fui-cube-left-image {
	width: 100%;
	height: 368upx;
}
.fui-cube-right-image {
	width: 100%;
	height: 180upx;
}
.fui-cube .fui-cube-right2 .left {
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.fui-cube .fui-cube-right2 .right {
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
}
.right {
	text-align: right !important;
}
.fui-cube .image {
	width: 100%;
	height: 100%;
}
.fui-picturew.row-2 .item {
	width: 50%;
}
.fui-picturew image {
	display: block !important;
} */
</style>
